<template>
    <div>
        <h1>防抖</h1>
      <el-button
        type="primary"
        :disabled="isSending || countdown > 0"
        @click="sendSms"
      >
        {{ countdown > 0 ? `重新发送 (${countdown}s)` : '发送验证码' }}
      </el-button>
    </div>
  </template>
  
  <script setup>
  import { ref, onUnmounted } from 'vue';
  
  // 响应式变量
  const isSending = ref(false); // 是否正在发送短信
  const countdown = ref(0); // 倒计时秒数
  const sendInterval = 5; // 发送间隔，单位秒
  
  // 发送短信的方法
  const sendSms = async () => {
    if (isSending.value || countdown.value > 0) return; // 如果正在发送或倒计时中，则不执行
  
    isSending.value = true; // 设置为正在发送状态
    countdown.value = sendInterval; // 设置倒计时为发送间隔
  
    // 模拟发送短信的异步操作（例如，调用API）
    // 注意：在实际应用中，您应该在这里调用发送短信的API
    try {
      // 假设发送短信的异步操作
      await new Promise((resolve) => setTimeout(resolve, 1000)); // 模拟1秒的操作时间
      console.log('短信发送成功');
      // 这里可以添加发送成功后的逻辑，比如更新状态或显示提示信息
    } catch (error) {
      console.error('短信发送失败', error);
      // 这里可以添加发送失败后的逻辑，比如显示错误信息
    } finally {
      // 无论成功还是失败，都执行以下逻辑
      startCountdown();
    }
  };
  
  // 开始倒计时的方法
  const startCountdown = () => {
    if (countdown.value <= 0) return; // 如果倒计时已经结束，则不执行
  
    const intervalId = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(intervalId); // 倒计时结束，清除定时器
        isSending.value = false; // 重置发送状态
      }
    }, 1000);
  
    // 在组件卸载时清除定时器，避免内存泄漏
    onUnmounted(() => {
      clearInterval(intervalId);
    });
  
  };
  </script>
  
  <style scoped>
  /* 添加一些简单的样式 */
  button {
    padding: 10px 20px;
    font-size: 16px;
  }
  </style>